<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8" />
		<title>组织表单</title>
		<div th:replace="common/common_form_header"></div>
	</head>
	<style>
		 ::-webkit-scrollbar-thumb {
		  background:#a2a2a2; 
		  border-radius: 10px;
		  height:50%;
		
		::-webkit-scrollbar{width:6px;}
			body{
				overflow-y: scroll;
			} 
.layui-form-label{
	text-align:left
}
.kb-form-container{
	padding-left:20px;
}
.layui-form-item .layui-inline{
	margin-right:0px
}
	</style>
	<body>
		
		<div class="addemployee-wrap" id="employee-wrap">
			<div class="form-wrap" >
    			<form  class="layui-form" id="defaultForm" th:method="post" th:action="@{/app/projectStation/save}">
    			<input type="hidden" id="partitionId" name="partitionId" th:value="${id}"/>
							<div class="layui-form-item">
							    <label class="layui-form-label">工位数</label>
							    <div class="layui-input-block">
							      	<input autocomplete="off" class="layui-input" name="num" placeholder="" type="tel" />
							    </div>
							</div>
							<div class="layui-form-item">
							    <label class="layui-form-label">工位前缀</label>
							    <div class="layui-input-block">
							      	<input autocomplete="off" class="layui-input" name="deskPrefix" placeholder="" type="tel" />
							    </div>
							</div>
							<div class="layui-form-item">
							    <div class="layui-inline">
								    <label class="layui-form-label">工位号</label>
							        <div class="layui-input-inline" style="width: 200px;">
							            <input autocomplete="off" class="layui-input" lay-verify="capacity" name="capacity" placeholder="" type="tel" />
							            <span style="color: rgb(153, 153, 153); font-size: 12px; padding: 4px 0px 0px;">工位号只能是数字或区间,如8,15-20</span>
							        </div>
							    </div>
							     <div class="layui-inline">
								        <span class="layui-btn layui-btn-normal btn-bg certain-btn">生成</span>&nbsp;&nbsp;
								        <a class="" onclick="closeLayer()">自动添加工位号</a>
								        <input type="hidden" id="stationNames" name="stationNames" />
							     </div>
							</div>
							<div class="layui-form-item" style="padding-left: 110px;">
								<span class="layui-btn layui-btn-radius layui-btn-danger mag-bot-20 clear-criteria hide" style="width: 150px;"><i class="layui-icon">&#x1006;</i> 删除全部工位</span>
							    <div class="desks-block">
							    </div>    
							</div>
							<div class="layui-form-item" style="position: fixed;">
							    <div class="layui-input-block">
							      <button class="layui-btn layui-btn-normal btn-bg" lay-submit lay-filter="formEmployee" id="submit-btn">确定</button>
							      <a class="layui-btn layui-btn-primary" onclick="closeLayer()">取消</a>
							    </div>
							</div>
				</form>
    		</div>
    	</div>
	</body>
	<script>
	$(document).ready(function() {
		initFormSelects("parentfolderid","/system/org/dept/selectjson/1",$("#parentId").val());
	});
	layui.config({
	        base: '/js/plugin/layui-v2.3.0/layui/' //此处路径请自行处理, 可以使用绝对路径
	    }).extend({
	        formSelects: 'formSelects-v3'
	    }).use(['element',"layer","form",'formSelects'], function(){
			var layer=layui.layer,form = layui.form,formSelects = layui.formSelects;
			
			form.verify({
				capacity: function(value, item){ //value：表单的值、item：表单的DOM对象
					var station ="";
				     $("span[name='station']").each(function(){
				    	 station+=","+$(this).text();
				     })
				     console.log(station);
				     $("#stationNames").val(station.substring(1));
			  	}
			}); 
			//监听提交
			form.on('submit(formEmployee)', function(data){
				if($("#stationNames").val()==""){
					layer.msg('请生成工位！');
				}else{
					$.post($("#defaultForm").attr('action'), data.field, function(result) {
						window.parent.layer.msg(result.msg);
						closeLayer();
					}, 'json');
				}
				
				return false;
			});
		});
	//手动生成工位号
	var res=[];//存储工位内容；
	$('.certain-btn').on("click",function(){
		var deskPrefix=$("input[name='deskPrefix']").val()+'';//工位前缀
		var capacity=$("input[name='capacity']").val();//工位内容
		var reg=/^[0-9,-]/;
		if(reg.test(capacity)){
			if(capacity.split(',').length>1){
				var arr=capacity.split(',');
				for(var i=0;i<arr.length;i++){
					if(arr[i]!=''){
					
						cleaRepeat(deskPrefix+parseInt(arr[i]))
					}
				}
			}else if(capacity.split('-').length>1){
					var arr=capacity.split('-');
					if(parseInt(arr[0])-parseInt(arr[1])>0){
						$("input[name='capacity']").val('')
					}else if(arr[0]==''&&arr[1]!=''){
						cleaRepeat(deskPrefix+(-arr[1]))
					}else if(arr[1]==''){
						$("input[name='capacity']").val('')
					}else{
						for(var j=parseInt(arr[0]);j<=parseInt(arr[1]);j++){
							
							if(res.indexOf(deskPrefix+j)==-1){
								res.push(deskPrefix+j);
							}else{
								layer.msg('工位不能重复');
								$("input[name='capacity']").val('')
								return false;
							} 
						}
					}
				
			}else{
				cleaRepeat(deskPrefix+parseInt(capacity))
			}
		}else{
			$("input[name='capacity']").val('')
		}
		
		if(res.length>0){//清空工位是否显示
			$('.clear-criteria').addClass("show").removeClass("hide");
		}else{
			$('.clear-criteria').addClass("hide").removeClass("show");
		}
		rendfn(res);
		$("input[name='capacity']").val('');//生成工位后的，input内容清空；
	})
	//点击删除全部工位
	$('.clear-criteria').on('click',function(){
		$('.desks-block').html('');
		$(this).addClass("hide").removeClass("show");
		res=[];
	})
	//每个工位的单独删除
	$('.desks-block').on("click",'.del-icon',function(){
		var txt=$(this).prev('span').text();
		var index=delfn(res,txt);
		
		if(index!=-1){
			res.splice(index,1);
		}
		rendfn(res);
	})
	
	//去重工位内容，不能重复
	function cleaRepeat(cont){
		if(res.indexOf(cont)==-1){
			res.push(cont);
		}else{
			layer.msg('工位不能重复');
			$("input[name='capacity']").val('')
			return false;
		}
	}
	//删除指定工位
	function delfn(res,cont){
		var index=-1;
		for(var i=0;i<res.length;i++){
			if(res[i]==cont){
				index=i;
			}
		}
		return index;
	}
	//渲染工位
	function rendfn(res){
		var deskstr="";
		if(res.length>0){//清空工位是否显示
			$('.clear-criteria').addClass("show").removeClass("hide");
		}else{
			$('.clear-criteria').addClass("hide").removeClass("show");
		}
		for(var i=0;i<res.length;i++){//渲染工位
			deskstr+='<div><span name="station">'+res[i]+'</span><i class="layui-icon del-icon">&#x1006;</i></div>';
		}
		$('.desks-block').html(deskstr);
	}
</script>
</html>